<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Panel</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

    <meta name="author" content="http://www.huayingsoft.com/" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=8,IE=9,IE=10" />
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store">

    <link rel="stylesheet" href="../../css/bootstrap.min.css">
    <link rel="stylesheet" href="../../css/bootstrapEx.css">

    <script src="../../js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../../js/global.js"></script>
    <script type="text/javascript" src="../../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../../js/bootstrapEx2.0.js"></script>
</head>
<body>
    <div class="container-fluid">
        <div id="panel1"></div>
        <div id="panel2"></div>
        <div id="panel3"></div>
        <div id="panel4"></div>
    </div>
</body>
<script>
     $(document).ready(function () {
        InitPanel1();
     });

     function InitPanel1(){
        new bsEx.Panel({
            id:"panel1",
            renderto:"#panel1",
            width:'600px',
            height:'500px',
            title:"普通面板 默认点击标题展开收起",
            body: '普通面板高度随内容增加',
            btns:[{id:"btn_collapse",text:"折叠"},{id:"btn_expand",text:"展开"}]
        });

        //注册事件
        bsEx.ui.panel1.on("beforecollapse",function(){
            alert("开始收起");
        })
        bsEx.ui.panel1.on("collapse",function(){
            alert("收起完毕");
        })
        bsEx.ui.panel1.on("beforeexpand",function(){
            alert("开始展开");
        })
        bsEx.ui.panel1.on("expand",function(){
            alert("展开完毕");
        })
        $('#btn_collapse').on("click",function(){
            bsEx.ui.panel1.collapse();
        })
        $('#btn_expand').on("click",function(){
            bsEx.ui.panel1.expand();
        })
    }
</script>
</html>